var vm = new Vue({
    el: '#app',
    // 修改Vue变量的读取语法，避免和django模板语法冲突
    delimiters: ['[[', ']]'],
    data: {
        host: host,
        error_name: false,
        error_password: false,
        error_password2: false,
        error_check_password: false,
        error_mobile: false,
        error_image_code: false,
        // error_sms_code: false,
        // error_allow: false,
        error_name_message: '请输入5-20个字符的用户',
        error_password_message: '请输入8-20位的密码',
        error_password2_message: '两次输入的密码不一致',
        error_mobile_message: '请输入正确的手机号码',
        // error_image_code_message: '请填写图形验证码',
        // error_sms_code_message: '请填写短信验证码',
        // error_allow_message: '请勾选用户协议',
        image_code_id: '',
        image_code_url: '',
        // sms_code_tip: '获取短信验证码',
        sending_flag: false,
        username: '',
        password: '',
        password2: '',
        mobile: '',
        // image_code: '',
        // sms_code: '',
        // allow: true
    },
    mounted: function () {
        // 向服务器获取图片验证码
        this.generate_image_code();
    },
    methods: {
        generateUUID: function () {
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        },
        // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
        generate_image_code: function () {
            // 生成一个编号 : 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
            this.image_code_id = this.generateUUID();
            // 设置页面中图片验证码img标签的src属性
            this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
            console.log(this.image_code_url);
        },
        // 检查用户名
        check_username: function () {
            var re = /^[a-zA-Z0-9_-]{5,20}$/;
            if (re.test(this.username)) {
                this.error_name = false;
            } else {
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }

            if (this.error_name == false) {
                let url = '/usernames/' + this.username + '/count/'
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            this.error_name = true
                            this.error_name_message = '用户名已注册'
                        } else {
                            this.error_name = false
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })
            }
        },
        // 检查密码
        check_password: function () {
            var re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },
        // 确认密码
        check_password2: function () {
            if (this.password != this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }
        },
        // 检查手机号
        // check_mobile: function () {
        //     var re = /^1[345789]\d{9}$/;
        //     if (re.test(this.mobile)) {
        //         this.error_phone = false;
        //     } else {
        //         this.error_mobile_message = '您输入的手机号格式不正确';
        //         this.error_phone = true;
        //     }
        //
        //     if (this.error_phone == false) {
        //         let url = '/mobiles/' + this.mobile + '/count/'
        //         axios.get(url, {
        //             responseType: 'json'
        //         })
        //             .then(response => {
        //                 if (response.data.count == 1) {
        //                     this.error_mobile_message = '手机号已注册'
        //                     this.error_mobile = true
        //                 } else {
        //                     this.error_mobile = false
        //                 }
        //             })
        //             .catch(error => {
        //                 console.log(error.response)
        //             })
        //     }
        //
        // },
        // 检查图片验证码
        // check_image_code: function () {
        //     if (!this.image_code) {
        //         this.error_image_code_message = '请填写图片验证码';
        //         this.error_image_code = true;
        //     } else {
        //         this.error_image_code = false;
        //     }
        //
        // },
        // // 检查短信验证码
        // check_sms_code: function () {
        //     if (!this.sms_code) {
        //         this.error_sms_code_message = '请填写短信验证码';
        //         this.error_sms_code = true;
        //     } else {
        //         this.error_sms_code = false;
        //     }
        // },
        // // 检查是否勾选协议
        // check_allow: function () {
        //     if (!this.allow) {
        //         this.error_allow = true;
        //     } else {
        //         this.error_allow = false;
        //     }
        // },
        // // 发送手机短信验证码
        // send_sms_code: function () {
        //     if (this.sending_flag == true) {
        //         return;
        //     }
        //     this.sending_flag = true;
        //
        //     // 校验参数，保证输入框有数据填写
        //     this.check_mobile();
        //     this.check_image_code();
        //
        //     if (this.error_phone == true || this.error_image_code == true) {
        //         this.sending_flag = false;
        //         return;
        //     }
        //
        //     // 向后端接口发送请求，让后端发送短信验证码
        //     var url = this.host + '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.image_code_id;
        //     axios.get(url, {
        //         responseType: 'json'
        //     })
        //         .then(response => {
        //             // 表示后端发送短信成功
        //             if (response.data.code == '0') {
        //                 // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
        //                 var num = 60;
        //                 // 设置一个计时器
        //                 var t = setInterval(() => {
        //                     if (num == 1) {
        //                         // 如果计时器到最后, 清除计时器对象
        //                         clearInterval(t);
        //                         // 将点击获取验证码的按钮展示的文本回复成原始文本
        //                         this.sms_code_tip = '获取短信验证码';
        //                         // 将点击按钮的onclick事件函数恢复回去
        //                         this.sending_flag = false;
        //                     } else {
        //                         num -= 1;
        //                         // 展示倒计时信息
        //                         this.sms_code_tip = num + '秒';
        //                     }
        //                 }, 1000, 60)
        //             } else {
        //                 if (response.data.code == '4001') {
        //                     this.error_image_code_message = response.data.errmsg;
        //                     this.error_image_code = true;
        //                 } else { // 4002
        //                     this.error_sms_code_message = response.data.errmsg;
        //                     this.error_sms_code = true;
        //                 }
        //                 this.generate_image_code();
        //                 this.sending_flag = false;
        //             }
        //         })
        //         .catch(error => {
        //             console.log(error.response);
        //             this.sending_flag = false;
        //         })
        // },
        // 表单提交
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            // this.check_sms_code();
            this.check_allow();

            if (this.error_name == true || this.error_password == true || this.error_check_password == true
                || this.error_phone == true || this.error_sms_code == true || this.error_allow == true) {
                // 不满足注册条件：禁用表单
                window.event.returnValue = false;
            }
        }
    }
});


